<template>
	<view class="add flex flex-direction ">
		<view class="margin-top-xl text-center">
			<tui-rate :current="current" :quantity="5" :size="40" active="#FFB712" @change="change"></tui-rate>
		</view>
		<view class="uni-title margin-top-sm">
			<input type="text" style="height: 80upx;" v-model="title" placeholder="请输入标题" class="uni-input" focus />
		</view>
		<view class="uni-textarea margin-top-sm">
			<textarea @confirm="confirmTextArea" :maxlength="val_max" style="height: 400rpx;" :show-confirm-bar="true" v-model="val" />
			<view class="size">
				{{size}}
			</view>
		</view>
		<view class="container">
			<view class="tui-box-upload">
				<tui-upload :serverUrl="serverUrl"  @complete="result" @remove="remove" ref="upload"></tui-upload>
			</view>
		</view>
		<tui-button @tap="confirmTextArea">添加</tui-button>
	</view>
</template>

<script>
	import tuiUpload from '@/components/tui-upload/tui-upload';
	export default {
		data() {
			return {
				val:"",
				title:"",
				val_max:200,
				imageData: [],
				serverUrl:"http://127.0.0.1:3000/users/uploadImg",
				current:0,
				movieId:1
			};
		},
		components: {
			tuiUpload
		},
		onLoad(option) {
			try{
				this.movieId=option.movieId||1;
			}catch(e){
				this.movieId=1
			}
		},
		methods: {
			confirmTextArea(){
				if(!this.title){
					this.$common.errorToShow("标题不能为空")
					return;
				}
				if(!this.val){
					this.$common.errorToShow("内容不能为空")
					return;
				}
				console.log(this.imageData)
				this.$api.addComment({
					commentTitle:this.title,
					commentCom:this.val,
					commentImgList:JSON.stringify(this.imageData),
					commentScore:this.current,
					movieId:this.movieId
				},(res)=>{
					if(res.code){
						this.$common.successToShow("评论成功",()=>{
							this.$common.redirectTo('../../pages/info/info?movieId='+this.movieId)
								this.val='';
							this.title='';
							this.imageData=[];
							this.current=0;
							this.$refs['upload'].delAll();
							 let page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						});
					}
				})
			},
			result: function(e) {
				this.imageData = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				let index = e.index
			},
			change: function(e) {
				this.current = e.index*2
			}
		},
		computed:{
			size(){
				return (this.val_max-(this.val.length));
			}
		}
	}
</script>

<style lang="scss" scoped>
		.uni-textarea{
			position: relative;
			border-bottom: 1upx solid #eee;
		}
		.size{
			position: absolute;
			bottom: 10px;
			right: 10px;
			color: #aaa;
		}
		.uni-input{
			border-bottom: 1upx solid #eee;
		}
		.add{
			padding-top: 20upx;
			padding-bottom: 120rpx;
		}
		.container {
			padding: 20rpx 0 120rpx 0;
			box-sizing: border-box;
		}
		.tui-box-upload{
			padding-left: 25rpx;
			box-sizing: border-box;
		}
</style>
